<template>
  <div>
    <div class="">
      <div class="max-w-[1200px] m-auto py-5">
        <img class="h-[55px]" src="@/assets/title.png">
      </div>
      <div :style="{background:`url(${require('@/assets/main-bg.png')})`}" style="background-size: contain"
           class="h-[50vh]">
        <div class="max-w-[1200px] m-auto py-10 flex justify-center">

          <div class=" w-[450px] ">
            <!--tab 切换-->
            <div class="flex ">
              <div :class="[identidyType==1?'!text-[white] !bg-[#4eacf0]':'']"
                   class=" cursor-pointer text-[#4eacf0] bg-white font-bold flex justify-center  items-center h-[40px]  "
                   style="flex:1" @click="identidyType=1">
                <span>个人用户</span>
              </div>
              <div :class="[identidyType==2?'!text-[white] !bg-[#4eacf0]':'']"
                   class="cursor-pointer text-[#4eacf0] bg-white font-bold flex  justify-center items-center h-[40px] "
                   style="flex:1" @click="identidyType=2">
                <span>法人用户</span>
              </div>
            </div>
            <!--登录框-->
            <div class="bg-white p-4" style="border-top: 1px solid rgba(128,128,128,0.32)">
              <div class="py-2">
                <div class="text-sm text-gray-700 mb-1">用户名</div>
                <div>
                  <el-input v-model="form.username"></el-input>
                </div>
              </div>

              <div class="py-2">
                <div class="text-sm text-gray-700 mb-1">密码</div>
                <div>
                  <el-input v-model="form.password" type="password"></el-input>
                </div>
              </div>

              <div class="py-4">
                <el-button type="primary" class="w-full" @click="handlerLogin">登录</el-button>
              </div>
              <div class="text-right">
                <router-link to="/register">
                  <span class="text-sm text-gray-400 ">注册</span>
                </router-link>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapState} from "vuex";
import api from "@/api";
import Cookies from "js-cookie";

export default {
  name: "index",
  computed: {
    ...mapState("main", ['userInfo'])
  },
  data() {
    return {
      identidyType: 1,
      form: {
        username: "",
        password: "",
        code: ""
      }
    }
  },
  methods: {
    handlerLogin() {
      if (!/\w+/.test(this.form.username)) {
        this.$notify({
          title: "提示",
          type: "error",
          message: "用户名不可以为空"
        })
        return
      }
      if (!/\w+/.test(this.form.password)) {
        this.$notify({
          title: "提示",
          type: "error",
          message: "密码不可以为空"
        })
        return
      }

      api.login(this.form).then((res) => {
        Cookies.set('token', res.token)
        console.log('>>>>>>>>>>>当前设置的token是',Cookies.get("token"))
        setTimeout(()=>{
          this.$router.push("/");
        },1000)
      })

    }
  }
}
</script>
<style scoped>

</style>
